<template>
  <el-card style="height: 100%;">
    <!-- 1.面包屑 -->
    <MyBread url="coach" level1="车辆查看" />
    <!-- 2.搜索 -->
    <el-input
      placeholder="请输入车牌号"
      v-model="search"
      class="with-input"
      clearable
    >
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="searchCar()"
      ></el-button>
    </el-input>
    <!-- 3.表格 -->
    <el-table :data="AllCarInfo" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="carNumber" label="车辆名"></el-table-column>
      <el-table-column prop="logonDate" label="注册日期"></el-table-column>
      <el-table-column
        prop="insuranceDate"
        label="保险日期"
      ></el-table-column>
      <el-table-column prop="validDate" label="有效日期"></el-table-column>
      <el-table-column prop="scrapDate" label="报废日期"></el-table-column>
      <el-table-column prop="appointDate" label="预约日期"></el-table-column>
      <el-table-column prop="useCount" label="使用次数"></el-table-column>
      <el-table-column label="状态" width="200">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isUse"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="已预约"
            inactive-text="未预约"
            disabled
            class="switch"
          ></el-switch>
        </template>
      </el-table-column>
    </el-table>
    <!-- 4.分页 -->
    <el-pagination
      style="margin-top: 30px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="length"
    ></el-pagination>
  </el-card>
</template>

<script>
export default {
  name: "CoachCar",
  data() {
    return {
      search: "",     // 搜索输入框输入的内容
      page: 1,        // 当前页数
      limit: 2,       // 每条页面条数
      length: 0,      // 获取数据的总长度
      AllCarInfo: [], // 所有车辆信息
    };
  },
  methods: {
    // 搜索功能实现 -- 获取搜索后的数据长度，按默认情况重新获取数据
    async searchCar() {
      this.length = (
        await this.$store.dispatch("CoachModule/getAllCarInfo", {
          like: this.search,
        })
      ).length;
      // 默认情况：limit:2, page:1
      this.limit = 2;
      this.page = 1;
      this.getCarList();
      this.search = "";
    },
    // 获取车辆数据
    async getCarList() {
      this.AllCarInfo = await this.$store.dispatch(
        "CoachModule/getAllCarInfo",
        {
          page: this.page,
          limit: this.limit,
          like: this.search,
        }
      );
    },
    // 当每页条数发生变化使调用
    handleSizeChange(val) {
      this.limit = val;
      this.page = 1;
      this.getCarList();
    },
    // 当页数发生变化时调用
    handleCurrentChange(val) {
      this.page = val;
      this.getCarList();
    },
  },
  async mounted() {
    // 获取车辆信息总长度
    this.length = (
      await this.$store.dispatch("CoachModule/getAllCarInfo", {})
    ).length;
    // 获取车辆数据
    this.getCarList();
  },
};
</script>

<style scoped>
.with-input {
  width: 500px;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-right: 10px;
}
</style>